import React from 'react'
import MainTitle from '../../../components/MainTitle'
import { Button, message, Space, Tabs } from 'antd';
import { useState, useMemo, useRef, useEffect } from 'react';
import { Card, Input, Select, List, Avatar, Row, Col, Progress, Spin, Form } from 'antd';
import request from '../../../utils/request'
import './StudentsInfo.css'
import './StudentsInfo.scss'
import { withSelector } from '../../../utils/hoc'
import NoInfo from '../../../components/NoInfo';
import { useCallback } from 'react';
import rTime from '../../../utils/formateDate'
import {
    BankOutlined, EnvironmentOutlined, TeamOutlined, HomeOutlined
} from '@ant-design/icons';

const { Option } = Select;
const { TabPane } = Tabs;
const { Search } = Input;
function StudentsInfo(props) {
    //学生信息
    const [UserInfo, setUserInfo] = useState([])
    //联动搜索框数据
    const [SearchInfo, setSearchInfo] = useState([])
    //输入框值
    const [nvalue, setValue] = useState('');
    //点击搜索的用户
    const [name, setname] = useState([]);
    //搜索学生信息
    const onSearch = useCallback(async (value, type) => {
        var { data } = await request.get('user/getStudentInfoByIdOrAccount', {
            params: {
                type: type,
                value: value
            }
        })
        setUserInfo(data.data)
        setSearchInfo([])
    }, [])
    //联动搜索
    const SearchName = useCallback(async (value) => {
        const { data } = await request.get('/user/searchUser?keywords=' + value)
        setSearchInfo(data.data.students)
    }, [SearchInfo])
    //输入框改变
    const onchange = useCallback(
        (newValue) => {
            setValue(newValue);
            SearchName(nvalue)
        }, [nvalue])
    const style = { background: '#fff', padding: '30px' };
    const [valname, setvalName] = useState('输入学生姓名或学号')

    useEffect(() => {
        if (props.location.search) {
            onSearch(props.location.search.split('=')[1], 'account')


        }
    }, [])
    return (
        <div id="StudentsInfo">
            <MainTitle>选择学生</MainTitle>
            <div className='wrapper' style={{ margin: '40px 0' }}>
                <div className="card-container">
                    <Tabs type="card">
                        <TabPane tab="级联选择" key="1">
                            <Space>
                                {props.render({
                                    btn: <Button type="primary" disabled={props.groupId.userId ? false : true} shape="round" onClick={() => {
                                        onSearch(props.groupId.userId, 'id')
                                    }}>
                                        搜索
                                    </Button>,
                                    selectNum: 4
                                })}
                            </Space>
                        </TabPane>
                        <TabPane tab="按条件搜索" key="2">
                            <div id='selectStudent' >
                                <Space style={{ width: '100%' }}>

                                    <Select
                                        showSearch

                                        style={{ width: '1000px' }}
                                        placeholder="输入学生学号"
                                        optionFilterProp="value"
                                        value={valname}
                                        allowClear
                                        onSelect={
                                            (value) => {
                                                setname(value)
                                                setvalName(value)
                                            }
                                        }
                                        onSearch={
                                            onchange
                                        }
                                        filterOption={(input, option) =>
                                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                        }
                                    >
                                        {
                                            SearchInfo.map(item => {
                                                return <Option value={item.account} key={item.id}>{item.account}</Option>
                                            })
                                        }
                                    </Select>
                                    <Button type='primary'
                                        onClick={() => {
                                            onSearch(name, 'account')
                                            setvalName(undefined)
                                        }}>搜索</Button>
                                </Space>

                            </div>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
            <MainTitle>详细信息</MainTitle>
            <div className='wrapper' style={{ margin: '40px 0' }}>
                {
                    UserInfo.length <= 0 ? <NoInfo>请选择用户</NoInfo> :
                        <>
                            <Row gutter={16}>
                                <Col className="gutter-row" span={12}>
                                    <div style={style}>

                                        <Card title="用户信息" bordered={false}
                                            bodyStyle={{ padding: 0 }}
                                            headStyle={{
                                                fontWeight: 'bold',
                                                color: '#1890ff',
                                                fontSize: '22px',
                                                marginBottom: '20px',
                                            }}>
                                            <p style={{ fontSize: 16, color: '#606266' }}><span style={{ fontWeight: 700, }}>姓名：</span>{UserInfo.name}</p>
                                            <p style={{ fontSize: 16, color: '#606266' }}><span style={{ fontWeight: 700 }}>学号：</span>{UserInfo.account}</p>
                                            <p style={{ fontSize: 16, color: '#606266' }}><span style={{ fontWeight: 700 }}>手机号：</span>{UserInfo.phone}</p>
                                            <p style={{ fontSize: 16, color: '#606266' }}><span style={{ fontWeight: 700 }}>注册日期：</span>{rTime(UserInfo.createdAt)}</p>

                                        </Card>
                                    </div>
                                </Col>
                                <Col className="gutter-row" span={12}>
                                    <div style={style} className='StudentBuilding'>
                                        <Row gutter={[24, 24]}>
                                            <Col className="gutter-row" span={12}>
                                                <div className="item">
                                                    <div className="item_icon">
                                                        {/* <SvgIcon iconClass="tree" /> */}
                                                        <BankOutlined style={{ fontSize: 50, color: '#FF4D4F' }} />
                                                    </div>
                                                    <div className="item_txt">
                                                        <div className="title">宿舍楼</div>
                                                        <span className="num">{UserInfo.buildingName}</span>
                                                    </div>
                                                </div>

                                            </Col>
                                            <Col className="gutter-row" span={12}>

                                                <div className="item">
                                                    <div className="item_icon">
                                                        <EnvironmentOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                                    </div>
                                                    <div className="item_txt">
                                                        <div className="title">所在楼层</div>
                                                        <span className="num">{UserInfo.floorLayer}</span>
                                                    </div>
                                                </div>
                                            </Col>
                                        </Row>
                                        <Row gutter={[24, 24]}>
                                            <Col className="gutter-row" span={12}>

                                                <div className="item">
                                                    <div className="item_icon">
                                                        <HomeOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                                    </div>
                                                    <div className="item_txt">
                                                        <div className="title">房间号</div>
                                                        <span className="num">{UserInfo.roomNumber}</span>
                                                    </div>
                                                </div>
                                            </Col>
                                            <Col className="gutter-row" span={12}>

                                                <div className="item">
                                                    <div className="item_icon">
                                                        <TeamOutlined style={{ fontSize: 50, color: '#52C41A' }} />
                                                    </div>
                                                    <div className="item_txt">
                                                        <div className="title">入住日期</div>
                                                        <span className="num">{rTime(UserInfo.createdAt)}</span>
                                                    </div>
                                                </div>
                                            </Col>


                                        </Row>
                                    </div>
                                </Col>
                            </Row>
                            <Card style={{ style, marginTop: 20 }}>
                                <span style={{ margin: '10px 0', display: 'block' }}>早起概率</span>
                                <Progress percent={((UserInfo.getupProb) * 100).toFixed(2)} status="active" strokeWidth={20} />
                                <span style={{ margin: ' 10px 0', display: 'block' }}>早归概率</span>
                                <Progress percent={((UserInfo.backProb) * 100).toFixed(2)} status="active" strokeWidth={20} />
                                <span style={{ margin: '10px 0', display: 'block' }}>打扫概率</span>
                                <Progress percent={((UserInfo.cleanProb) * 100).toFixed(2)} status="active" strokeWidth={20} />
                            </Card>
                        </>
                }
            </div>

        </div>
    )
}
export default withSelector(StudentsInfo)